<template>
  <div class="popup_box">
    <form action="/">
      <van-search
        v-model.lazy="searchPopupVal"
        show-action
        :placeholder="defaultKeyword"
        @search="onSearch"
        @cancel="onCancel"
        @input="searchLish"
      />
    </form>

    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagChange="tagChange"
    />
    <SearchTipsList
      v-else-if="blockShow == 2"
      :searchProductLish="searchProductLish"
      @cellClick="cellClick"
    />
    <SearchProductList
      v-else-if="blockShow == 3"
      :goodsListApply="goodsListApply"
      :filterCategor="filterCategor"
      @chanCategroyList="chanCategroyList"
      @priceChange="priceChange"
    />
  </div>
</template>

<script>
import {
  GetHistoryListApi,
  GetSearchProductListApi,
  GetProductData,
} from "../../request/api";
import HistoryHot from "./HistoryHot.vue";
import SearchTipsList from "./SearchTipsList.vue";
import SearchProductList from "./SearchProductList.vue";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      //用户输入的值
      searchPopupVal: "",
      //切换popup页面
      blockShow: 1,
      //搜索栏默认数据
      defaultKeyword: "",
      // 历史记录搜索列表数据
      historyKeywordList: [],
      // 热门推荐搜索列表数据
      hotKeywordList: "",
      //搜索商品列表渲染
      searchProductLish: [],
      //搜索商品数据渲染
      goodsListApply: [],
      // 商品分类的数据
      filterCategor: [],
      //商品分类id
      categoryId: "",
      //价格排序
      order: "",
      //排序
      sort: "",
    };
  },
  //注册组件
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProductList,
  },
  created() {
    // 历史记录数据请求
    GetHistoryListApi().then((res) => {
      console.log(res);
      let { defaultKeyword, historyKeywordList, hotKeywordList } =
        res.data.data;
      this.defaultKeyword = defaultKeyword.keyword;
      this.historyKeywordList = historyKeywordList;
      this.hotKeywordList = hotKeywordList;
    });
  },
  methods: {
    //快速搜索商品
    cellClick(value){

        this.onSearch(value);
    },
    //根据历史记录筛选商品
    tagChange(value) {
      //跳转到商品筛选页面
      this.blockShow = 3;
      this.onSearch(value);
    },
    //根据分类的id筛选数据
    chanCategroyList(value) {
      //这个value是子组件传入的id值
      this.categoryId = value;
      // 调用请求数据的方法
      this.onSearch(this.searchPopupVal);
    },
    //根据价格高低筛选数据
    priceChange(value) {
      this.order = value;
      this.sort = "price";
      this.onSearch(this.searchPopupVal);
    },

    //修改popup显示隐藏状态
    ...mapMutations({
      chanPopupIsShow: "popupShow/chanPopupIsShow",
    }),
    // 搜索框按回车时的事件行为
    onSearch(value) {
      this.blockShow = 3;
      GetProductData({
        keyword: value,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      }).then((res) => {
        if (res.data.errno == 0) {
          console.log("请求成功");
          console.log(res);
          let { data, filterCategory } = res.data.data;
          this.goodsListApply = data;

          let arr = filterCategory.map((item) => {
            return { text: item.name, value: item.id, checked: item.checked };
          });
          this.filterCategor = arr;
        }
      });
    },
    onCancel() {
      //点击取消放回放回上一页
      this.$router.go(-1);
      //点击取消隐藏popup遮罩层
      this.chanPopupIsShow(false);
    },
    //搜索商品列表
    searchLish(value) {
      GetSearchProductListApi({
        keyword: value,
        categoryId: this.id,
      }).then((res) => {
        if (res.data.errno == 0) {
          this.searchProductLish = res.data.data;
        }
      });
      this.blockShow = 2;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.popup_box {
  position: absolute;
  top: 0;
  background-color: #ddd;
  width: 100%;
  height: 100%;
}
</style>